<template>
  <TresMesh :geometry="geometry" :material="material" :position="[0, 0, 1]" />
</template>

<script lang="ts" setup>
import { GeometryShape } from '@/graph/3d/config/shapes'
import { Line2 } from '@tresjs/cientos'
import { useRenderLoop } from '@tresjs/core'
import { Function } from '../../hooks/shapes'
import dat from 'dat.gui'

const props = defineProps<{
  data: Function
}>()

const geometry = shallowRef(props.data.geometry)
const material = shallowRef(props.data.material)

// const gui = new dat.GUI()
// gui
//   .add(material.value.uniforms.heightRange, 'value', 0, 100)
//   .name('Z轴范围')
//   .onChange(() => {
//     console.log(material.value.uniforms.heightRange.value)
//   })
// gui
//   .addColor({ top: 0xeeeeee }, 'top')
//   .onChange((v) => material.value.uniforms.topColor.value.set(v))
// gui
//   .addColor({ bottom: 0x333333 }, 'bottom')
//   .onChange((v) => material.value.uniforms.bottomColor.value.set(v))

</script>

<style lang="scss" scoped></style>
